<template>
  <div>
    <button @click="toggleReview" class="assessmentButton">评价</button>
    <transition name="fade">
      <div v-if="showReviewInput" id="reviewInput">
        <textarea
          v-model="reviewText"
            style="font-size: 18px;overflow-y: auto;"
          rows="4"
          cols="70"
          placeholder="请输入评价内容"
        ></textarea>
        <button @click="submitReview" style="margin-left: -100px;">提交</button>
      </div>
    </transition>
  </div>
</template>
  
  <script>
  
export default {
  name:'RulerCommend',
  data() {
    return {
      reviewText: "",
      showReviewInput: false,
    };
  },
  methods: {
    toggleReview() {
      this.showReviewInput = !this.showReviewInput;
    },
    submitReview() {
      console.log("提交的评价内容:", this.reviewText);
      this.$parent.reviewCommend(this.reviewText);
      this.showReviewInput = false;
    },
  },
};
</script>
  
  <style scoped>
.assessmentButton {
  height: 40px;
  text-align: center;
  padding: 7px;
  border-radius: 23px;
  border:1px solid #a6c1ee;
  font-weight: 700;
  font-size: 17px;
  margin: 0 auto;
  width: 80px;
  background-image: linear-gradient(to right, #a6c1ee, rgb(251, 194, 235));
  color: #fff;
  position: relative;
  left:560px;
  top:150px;
}
/* 样式可以根据需要进行调整 */
#reviewInput {
  margin-top: 0px;
  padding: 8px;
}

#reviewInput textarea {
  margin-bottom: 10px;
}

#reviewInput button {
    height: 40px;
  text-align: center;
  padding: 7px;
  border-radius: 23px;
  border:1px solid #a6c1ee;
  font-weight: 700;
  font-size: 17px;
  width: 80px;
  background-image: linear-gradient(to right, #a6c1ee, rgb(251, 194, 235));
  color: #fff;
  position: relative;
  top:30px;
  left:-100px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
  